import React, { memo, useEffect, useState, useRef } from 'react'
// 引入类型：
import type { ReactNode, ElementRef } from 'react'
// import { shallowEqualApp, useAppSelector } from '../../../../../../store'
// import { getBannerRequest } from '../../service/recommend'
import { bannerDataList } from '../../../../../../assets/data/local-data'
import { BannerWrapper } from './style'
import { Carousel } from 'antd'

interface IProps {
	children?: ReactNode
}

// 对组件进行类型定义，FC 表示函数式组件（即：FunctionComponents）
const Banner: React.FC<IProps> = () => {
	const [bannerData, setBannerData] = useState<any[]>([])
	const bannerRef = useRef<ElementRef<typeof Carousel>>(null)
	// 背景虚幻图片
	const [bannerBg, setBannerBg] = useState<string>('')
	// 切换 banner 点的 active
	// const [dotsActive, setDotsActive] = useState(0)

	useEffect(() => {
		// 获取数据
		// getBannerRequest().then((res: any) => {
		// 	setBannerData(res.banners)
		// })

		setBannerData(bannerDataList.banners)
		setBannerBg(bannerDataList.banners[0].imageUrl + '?imageView&blur=40x20')
	}, [])

	const changeBannerImg = (num: number) => {
		// 1 表示下一张，-1 表示上一张
		if (num === 1) bannerRef.current?.next()
		else bannerRef.current?.prev()
	}

	// 处理轮播图片切换后，得到图片
	const handleAfterChange = (current: number) => {
		setBannerBg(bannerData[current].imageUrl + '?imageView&blur=40x20')
	}

	return (
		<BannerWrapper style={{ background: `url(${bannerBg}) center center / 6000px` }}>
			<div className="banner">
				{/* autoplaySpeed={1000} */}
				<Carousel
					ref={bannerRef}
					effect="fade"
					autoplay
					afterChange={(current) => handleAfterChange(current)}
					dots={{ className: 'dotsActive' }}
				>
					{bannerData?.map((item, index) => {
						return (
							<div className="bannerContent" key={index}>
								<img src={item.imageUrl} alt="" />
							</div>
						)
					})}
				</Carousel>
				<a className="download" href="">
					<img
						src="https://s2.music.126.net/style/web2/img/index/download.png?955e3a2f5613633dae294ee35114baca"
						alt=""
					/>
				</a>
				<button onClick={() => changeBannerImg(-1)} className="bannerBtn leftbtn">
					{'<'}
				</button>
				<button onClick={() => changeBannerImg(1)} className="bannerBtn rightbtn">
					{'>'}
				</button>
			</div>
		</BannerWrapper>
	)
}

export default memo(Banner)
